<template>
  <div class="upload-file">
    <div class="upload-file-text">
      <Icon type="md-add" />
      <p class="file-format">仅支持 {{ subCategoryItem.fileFormat }}</p>
    </div>

    <input
      ref="inputFile"
      type="file"
      :multiple="attachmentConfigs.multiple ? true : false"
      :accept="acceptFileType(subCategoryItem.fileFormat)"
      class="upload-input-btn"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useFile } from './utils/useFile';
import { useUpload } from './utils/useUpload';
import { useDependencyInjection } from '../../utils/useDependencyInjection';

const props = defineProps({
  subCategoryItem: {
    type: Object,
  },
   /**
   * @description: 上传
   */
   beforeUpload: {
    type: Function,
    default: () => {},
  },
  attachmentConfigs: {
    type: Object,
    default: ()=> ({
      showDelete: false,
        showUpload: true,
        showDown: true,
        showTopBar: false,
        showStandard: false,
        showApproveFlag: false,
        showAllBlank: false,
        showEmptySubclass: true,
        multiple: true
    })
  }
});
const emits = defineEmits(['uploadSuccess']);
const { acceptFileType } = useFile(props, emits);
const inputFile = ref(null);
const { getInject } = useDependencyInjection();
const { handleChange } = useUpload(props, emits, inputFile);
</script>
